<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .slider {
            position: relative;
            width: 100vw;
            height: 47.4667vw;
            background-color: #aaa;
            overflow: hidden;
        }

        .slider ul {
            display: inline-flex;
            transition: all 0.5s;
        }

        .slider img {
            display: block;
            width: 100vw;
            height: 47.4667vw;
        }

        ol {
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 2.6667vw;
            transform: translateX(-50%);
        }

        ol li {
            width: 2.1333vw;
            height: 2.1333vw;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            margin: 1.0667vw;
        }

        .active {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="slider">
        <ul class="slider-wrap">
            <li><img src="../案例/img/01.jpg" alt="" /></li>
            <li><img src="../案例/img/02.jpg" alt="" /></li>
            <li><img src="../案例/img/03.jpg" alt="" /></li>
            <li><img src="../案例/img/04.jpg" alt="" /></li>
            <li><img src="../案例/img/05.jpg" alt="" /></li>
        </ul>
        <ol></ol>
    </div>

    <script>
        //自动播放
        //PC端 封装animate函数  改变元素（绝对定位）偏移值
        //移动端 transform：translateX + 过滤
        var slideWrap = document.querySelector(".slider-wrap");

        // 单张图片的大小
        var width = slideWrap.children[0].offsetWidth
        //  图片的数量
        var imgNum = slideWrap.children.length

        // 小圆点的容器
        var indicatorWrap = document.querySelector('ol')

        // 记录当前播放到了哪一张图片
        var currentIndex = 0;

        var intervalTime = 2000;
        // 动态的生成小圆点
        for (var i = 0; i < imgNum; i++) {
            var li = document.createElement("li");
            indicatorWrap.appendChild(li);
        }


        function indicatorActive() {
            // 先把所有的小圆点 active类名去掉
            for (var i = 0; i < imgNum; i++) {
                indicatorWrap.children[i].classList.remove("active")
            }
            indicatorWrap.children[currentIndex].classList.add("active")
        }

        indicatorActive();

        function slide() {
            indicatorActive();
            slideWrap.style.transform = "translateX(-" + width * currentIndex + "px)";
            if (currentIndex < imgNum - 1) {
                currentIndex++;
            } else {
                currentIndex = 0;
            }
        }

        //实现自动轮播的效果
        var timer = setInterval(slide, intervalTime);

        // 滑动切换图片的效果
        var X = 0; // 记录 touchstart 手指刚放上去的X 坐标

        slideWrap.addEventListener("touchstart", function (e) {
            console.log("start");

            // 触摸开始时 我们记录下用户手指的坐标值
            X = e.targetTouches[0].pageX;

            // 开始触摸时 就清除定时器 停止自动播放
            clearInterval(timer);
        });

        slideWrap.addEventListener("touchmove", function (e) {
            console.log("move");
            // 当用户触摸移动时, 我们让slideWrap跟着用户的手指移动的位置进行平移, 从而产生一种图片被用户滑动的视觉效果
            slideWrap.style.transform =
                "translateX(" +
                (-currentIndex * width + e.targetTouches[0].pageX - X) +
                "px)";
        });


        // 如果发现 用户 停止touch之后 图片移动的位置 超过了图片宽度的1/3 我们就认定 用户想翻到下一张图
        slideWrap.addEventListener("touchend", function (e) {
            // 通过touch结束和touch开始时坐标的差值来计算出 此次滑动移动图片的距离
            var distance = e.changedTouches[0].pageX - X;
            console.log(distance);

            // 再根据用户滑动的距离 来判断下 是否向下或者向上切换图片
            // 从右往左的滑动
            if (distance < -width / 3) {
                currentIndex++;
            } else if (distance > width / 3) {
                currentIndex--;
            }

            // 为了防止超过最大图片的数量 我们要对currentIndex进行边缘的判断
            currentIndex = currentIndex >= imgNum ? imgNum - 1 : currentIndex;
            currentIndex = currentIndex < 0 ? 0 : currentIndex;

            // 让小圆点的选中效果跟着最新的currentIndex进行更新
            indicatorActive();

            // 最后根据最新的currentIndex的值，我们决定slideWrap移动的距离
            slideWrap.style.transform =
                "translateX(-" + currentIndex * width + "px)";

            // 触摸结束后 我们让定时器重新运行,开始自动轮播效果
            timer = setInterval(slide, intervalTime);
        });


    </script>

</body>

</html>